/**
 * 支付管理 图像分析
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <br/>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图像分析</el-breadcrumb-item>
    </el-breadcrumb>

    <br/>
    <br/>

  
  
   <!-- 类别选择div -->
  <div style="padding-left:350px;margin-top: 15px;">
    请选择类别:&emsp;
     <el-radio v-model="radio" label="1">敞车</el-radio>
     <el-radio v-model="radio" label="2">集装箱</el-radio>
    <el-button type="primary" @click="send_type" :loading="loadingbut">{{loadingbuttext}}</el-button>
  </div>

    <br/>
    <br/>


    <!-- 分页组件 -->
          <el-table v-loading="loading" v-show="table1" :data="image_list.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.OpenType.toLowerCase().includes(search.toLowerCase()) || data.OpenNumber.toLowerCase().includes(search.toLowerCase()))"  border stripe fit empty-text="暂无数据"
                   style="width: 100%">
              <el-table-column label="车厢"
                               prop="OpenType" align="center">
              </el-table-column>
             <el-table-column label="编号"
                               prop="OpenNumber" align="center">
              </el-table-column>

              <el-table-column label="结果"
                               prop="judgment" align="center">

            <template  slot-scope="scope" >

                               <div v-if="scope.row.judgment == 'True'" align='center'>
                                    <el-result icon="success" >
                                    </el-result>
                               </div>

                               <div v-else align='center'>
                                  <el-result icon="error" >
                                  </el-result>
                               </div>
                 
            </template>


              </el-table-column>

          <el-table-column label="图片"
                              prop="OpenPicPath" align="center">

            <template  slot-scope="scope">
                  <el-image 
                    style="width: 100px; height: 50px"
                    :src="'http://127.0.0.1:5000/'+scope.row.OpenPicPath"
                    :preview-src-list="['http://127.0.0.1:5000/'+scope.row.OpenPicPath]"
                    >
                  </el-image>
            </template>

          </el-table-column>
<!-- 
             <el-table-column align="center">
                <template slot="header" slot-scope="{}">
                      <el-input v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"
                                 />
                  </template> -->
                  <!-- @click="handleEdit(scope.$index, scope.row)" -->
                  <!-- @click="handleDelete(scope.$index, scope.row)" -->
                  <!-- <template slot-scope="scope">
                      <el-button size="mini"></el-button>
                      <el-button size="mini" type="danger"></el-button>
                  </template> -->
              <!-- </el-table-column> -->
          </el-table>



        <el-table v-loading="loading" v-show="table2" :data="image_list.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.flatcar_num.toLowerCase().includes(search.toLowerCase()) || data.open_car_num.toLowerCase().includes(search.toLowerCase()))"  border stripe fit empty-text="暂无数据"
                   style="width: 100%">
              <el-table-column label="平车编号"
                               prop="flatcar_num" align="center">
              </el-table-column>
             <el-table-column label="集装箱1编号"
                               prop="open_container_num" align="center">
              </el-table-column>
              <el-table-column label="集装箱2编号"
                               prop="container_num" align="center">
              </el-table-column>

              <el-table-column label="敞车车型"
                               prop="open_car_model" align="center">
              </el-table-column>
              <el-table-column label="敞车编号"
                               prop="open_car_num" align="center">
              </el-table-column>




          <el-table-column label="97图片" prop="image_dir_97" align="center">
            <template  slot-scope="scope">
                  <el-image  style="width: 100px; height: 50px"
                    :src="'http://127.0.0.1:5000'+'/static/one/container/97/'+scope.row.image_dir_97"
                    :preview-src-list="['http://127.0.0.1:5000'+'/static/one/container/97/'+scope.row.image_dir_97]"
                    >
                  </el-image>
            </template>
          </el-table-column>

          <el-table-column label="98图片" prop="image_dir_98" align="center">
            <template  slot-scope="scope">
                  <el-image  style="width: 100px; height: 50px"
                    :src="'http://127.0.0.1:5000'+'/static/one/container/98/'+scope.row.image_dir_98"
                    :preview-src-list="['http://127.0.0.1:5000'+'/static/one/container/98/'+scope.row.image_dir_98]"
                    >
                  </el-image>
            </template>
          </el-table-column>

          <el-table-column label="99图片" prop="image_dir_99" align="center">
            <template  slot-scope="scope">
                  <el-image  style="width: 100px; height: 50px"
                    :src="'http://127.0.0.1:5000'+'/static/one/container/99/'+scope.row.image_dir_99"
                    :preview-src-list="['http://127.0.0.1:5000'+'/static/one/container/99/'+scope.row.image_dir_99]"
                    >
                  </el-image>
            </template>
          </el-table-column>


             <!-- <el-table-column align="center">
                <template slot="header" slot-scope="{}">
                      <el-input v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"
                                 />
                  </template> -->


                  <!-- @click="handleEdit(scope.$index, scope.row)" -->
                  <!-- @click="handleDelete(scope.$index, scope.row)" -->
                  <!-- <template slot-scope="scope">
                      <el-button size="mini"></el-button>
                      <el-button size="mini" type="danger"></el-button>
                  </template> -->
              <!-- </el-table-column> -->
          </el-table>

        <br/>
        <br/>

    <div class="block" style="float:right">
        <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
    </div>

  </div>
</template>

<script>
import Axios from 'axios'

import {
  MachineConfigList,
  MachineConfigSave,
  MachineConfigDelete
} from '../../api/payMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      image_list:[],//返回列表
      textarea:'',//文件夹路径
      radio:'1',//选择敞车还是集装箱
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      // v-show 显示隐藏
      table1:false,
      table2:false,


      visible: false,
      search: '',
      pageSize: 10,
      pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
      currentPage: 1,
      total: 0,

      loadingbut:false,//数据加载中
      loadingbuttext:'确定',
      


      
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  created() {
    
  },
  computed: {

  },


  methods: {

    dataURItoBlob(val) {
                console.log("传参类型是不是数组", val instanceof Array)
                return val.map(item => `data:image/jpg;base64,${item}`)
            },


      handleEdit(index, row) {
       console.log(index, row);
           },
      handleDelete(index, row) {
       console.log(index, row);
           },
      handleSizeChange(val) {
          this.pageSize = val;
            },
      handleCurrentChange(val) {
          this.currentPage = val;
         },

  getObsFilelist: function () {
                   var _this = this;
                    for (var i = 0; i < 120; i++) {
                     var obj = {
                       createdon: '2016-05-02',
                       foton_fileoldname: '测试obs文件' + i,
                       filetype: '类型' + i
                   };
                     _this.tableData.push(obj);
                  }
                     _this.total = 120;
             },


    // 选择敞车或者集装箱类别
    send_type(){

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.loadingbut = true;
				this.loadingbuttext = '加载数据中...';
        this.loading = true
        this.image_list=[]

        this.$axios({method: 'get',url:this.GLOBAL.ip_ssoServer+'imageblue/select_type/',params:{type:this.radio}}).then(res=>{
                console.log(res.data);
                this.loadingbut = false;
                this.loadingbuttext = '确定';
                loading.close();
                // this.$loading.lock=false
                if(res.data.code==200 && this.radio == '1'){
                  this.$message.success('加载成功!')
                  this.table1=true
                  this.table2=false
                  this.image_list = res.data.list
                  this.total = res.data.count
                  this.loading = false

                   
                }else if(res.data.code==200 && this.radio == '2'){

                  this.table2=true
                  this.table1=false
                  this.image_list = res.data.list
                  this.total = res.data.count
                  this.loading = false
                }
                  },err=>{
                    if(err){
                      this.loadingbuttext = '数据加载失败!';
                      this.loadingbut = false;
                    }
                    console.log(err,'这里是报错');
                    })

        // setTimeout(() => {
        // if(this.loading==false){
          
        // }
          
        // }, 10000);
      
  },



    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.tcId = row.tcId
        this.editForm.machineNo = row.machineNo
        this.editForm.configId = row.configId
        this.editForm.payType = row.payType
        this.editForm.configName = row.configName
        this.editForm.payOpen = row.payOpen
      } else {
        this.title = '添加'
        this.editForm.tcId = ''
        this.editForm.machineNo = ''
        this.editForm.payType = ''
        this.editForm.configId = ''
        this.editForm.configName = ''
        this.editForm.payOpen = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          MachineConfigSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '公司保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('支付配置信息保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          MachineConfigDelete(row.deptId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '公司已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('支付配置信息删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 